<template>
    <el-dialog title="客户信息" v-model="showDialog" :width="dialogWidth" :append-to-body="true"
        :close-on-click-modal="false">
        <div class="bform">
            <div class="h1">
                <div><el-input v-model="ser.key" @blur="search"></el-input></div>

            </div>
            <div class="b1">
                <div v-for="item in list" :key="item.id" class="item" @click.stop="itemClick(item)" :data-item="item">
                    {{ item.name }}
                </div>
            </div>
        </div>
    </el-dialog>
</template>
<script type="text/javascript">
var fun = function () {

}
export default {
    data() {
        return {
            ser: { key: '' },
            list: [],
            showDialog: false,
            dialogWidth: window.innerWidth > 768 ? '768px' : '100%',
        }
    },
    methods: {
        show() {
            return new Promise((resolve) => {
                this.ser.key = '';
                this.showDialog = true;
                this.list = []
                this.search();
                fun = (obj) => {
                    resolve(obj);
                }
            })
        },
        search() {
            this.$api.customer.searchname(this.ser.key).then(({ msg }) => {
                this.list = msg;
            })
        },
        itemClick(item){
            this.showDialog=false;
            fun(item);
        }
    }
}
</script>
<style lang="scss" scoped>
.bform {
    width: 100%;
    height: 500px;
    display: grid;
    grid-template-rows: 50px 1fr;

    .h1 {
        display: grid;
        grid-template-columns: 1fr 100px;
    }

    .b1 {
        overflow-y: auto;

        .item {
            height: 40px;
            line-height: 40px;
            text-indent: 10px;
            font-size:16px;
            cursor: pointer;
            &:hover{
                background-color: #00000010;
                font-weight: bold;
            }
        }
    }

}
</style>